<template>
  <el-input
    v-model="textarea"
    style="width: 240px"
    :rows="2"
    type="textarea"
    placeholder="请输入代办事项"
  />
  <hr />
  <el-button type="success" @click="addTodo" plain>创建</el-button>
  <el-button type="danger" @click="cleak" plain>清空</el-button>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import request from "@/utils/request";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const textarea = ref("");

const cleak = () => {
  textarea.value = "";
};

// 定义事件
const emit = defineEmits(["onSubmitSuccess"]);

const addTodo = () => {
  console.log(textarea.value);
  // ❌ 不推荐：需要改请求头，麻烦
  const formData = new FormData();
  formData.append("title", textarea.value);

  request.post("/api/todo", formData, {
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
  });
  textarea.value = ""; // 清空输入框
  emit("onSubmitSuccess"); // 通知父组件
  ElMessage.success("添加成功!");
};
</script>
